<script setup>
  import { defineProps, useAttrs, watch, ref } from 'vue'
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false
    }
  })
  const attr = useAttrs()
  const visible = ref(false)

  watch(
    () => props.modelValue,
    val => {
      visible.value = val
    }
  )
</script>

<template>
  <t-drawer
    v-model:visible="visible"
    size="80%"
    :close-on-esc-keydown="false"
    :close-on-overlay-click="false"
    close-btn
    v-bind="attr"
  >
    <template #header>
      <slot name="header"></slot>
    </template>
    <slot></slot>
  </t-drawer>
</template>

<style lang="scss" scoped></style>
